<template>
  <!-- <div class="camera-box" style="width: 300px;"> -->
  <div class="camera-box">
    <!-- <el-row :gutter="20"> -->
    <el-col :span="12"
      style="display: flex;flex-direction:column;align-items : center;justify-content: space-between; height: 210px;">
      <el-image :src="url" style="width: 46%; height: 80%"></el-image>
      <div class="camera-btn">
        <el-button type='primary' size='large' icon="el-icon-camera" @click="takePhone"
          style="margin-top: 10px;">拍照</el-button>
        <el-button size='large' style="margin-top: 10px;" @click="dialogVisible = true">放大图片</el-button>
      </div>
    </el-col>
    <el-dialog :modal-append-to-body="false" :append-to-body="true" title="头像放大" :visible.sync="dialogVisible"
      width="30%" :before-close="handleClose">
      <el-image :src="url" style="width: 100%; height: 100%"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <MyCamera ref="myCamera" v-if="cameraVisible" @unpdateAvatar="unpdateAvatar"></MyCamera>
    <!-- </el-row> -->
  </div>
</template>
<script>
  import {
    upload as uploadImage,
    getImg as getLoadImage
  } from '@/api/file'
  import MyCamera from '@/components/Camera/index.vue'
  // import {putFileAttach} from "@/api/customer/animalinfo";
  export default {
    components: {
      MyCamera
    },
    props: {
      defaultImage: {
        type: String,
        default: require('@/assets/images/error.png'),
      },
    },
    data() {
      return {
        url: require('@/assets/images/error.png'),
        cameraVisible: false,
        dialogVisible: false
      }
    },
    mounted() {

    },
    methods: {
      handleClose(done) {
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
        done()
      },
      //打开camera
      takePhone() {
        this.cameraVisible = true
        this.$nextTick(() => {
          this.$refs.myCamera.init()
        })
      },
      async unpdateAvatar(path) {
        let res1 = await getLoadImage(path)
        const buffer = Buffer.from(res1)
        let base64 = this.arrayBufferToBase64(buffer)
        let base64Url = "data:image/png;base64," + base64
        this.url = base64Url
        this.$emit('getAvatar', this.url, path)
        return {
          base64Url: this.url,
          path: path
        }
      },
      arrayBufferToBase64(buffer) {
        var binary = ''
        var bytes = new Uint8Array(buffer)
        var len = bytes.byteLength
        for (var i = 0; i < len; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        return window.btoa(binary)
      },
    }
  }
</script>
<style>
  .camera-box #canvas {
    border: 1px solid #DCDFE6;
  }

  .camera-box {
    /* width: 100%; */
  }

  .camera-btn {
    display: flex;
    justify-content: center;
  }
</style>
